<template>
	<view>
		<u-navbar title="更多乘机人" back-text='取消' back-icon-size='0' :back-text-style='back' :border-bottom='false'>
			<view slot='right' style='padding-right: 32rpx;font-size: 30rpx;color: #3587F7;' @click="backFn">
				确认
			</view>
		</u-navbar>
		<view class="container">
			<view class="btnBox">
				<view class="btn" @click="navTo">
					新增乘车人
				</view>
				<view class="btn">
					邀请好友填写
				</view>
			</view>
			<view class="tips">
				<text style="color: #E5793B;">小贴士：</text><text style="color: #666666;">姓名需与乘机证件一致，否则会影响登机</text>
			</view>
			<view class="infoBox">
				<view class="passenger-li" v-for="(peo,index) in peoList" :key='index'>
					<view class="checkbox">
						<u-checkbox v-model='peo.checked' shape="circle" @change="changeFn"></u-checkbox>
					</view>
					<view class="userInfo">
						<view class="name">
							{{peo.id_name}}
						</view>
						<view class="id">
							身份证 {{peo.id_number}}
						</view>
					</view>
					<view class="icon" @click="edit(peo)">
						<u-icon name="edit-pen" color="#2979ff" size="40"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				back: {
					color: '#3587F7'
				},
				checked: false,
				peoList: [],
				checkPeolist: [],
				page: 1
			}
		},
		onLoad() {
			if (this.$store.state.airPeople.length) {
				this.checkPeolist = this.$store.state.airPeople
			}
		},
		onShow() {
			this.page = 1
			this.peoList = []
			this.getTripeople()
		},
		onReachBottom() {
			this.page++
			this.getTripeople()
		},
		methods: {
			edit(peo) {
				uni.navigateTo({
					url: './editmorePassenger?name=' + peo.id_name + '&num=' + peo.id_number
				})
			},

			changeFn(e) {
				this.$store.commit('changeAirPeople', this.peoList)
			},
			// 获取出行人信息
			async getTripeople() {
				let that = this
				let {
					page
				} = this
				let res = await myRequest.getTripman({
					page: page.toString(),
				})
				if (res.status) {
					res.data.forEach(item => {
						item.checked = false
					})
					this.peoList = res.data
					if (this.checkPeolist.length) {
						this.checkPeolist.forEach(item => {
							this.peoList.forEach(peo => {
								if (item.id == peo.id) {
									peo.checked = item.checked
								}
							})
						})
					}
				}
			},
			backFn() {
				uni.navigateBack({
					delta: 1
				})
			},
			navTo() {
				uni.navigateTo({
					url: "./addPassenger"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.btnBox {
			padding: 24rpx 28rpx;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 336rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
				line-height: 76rpx;
				text-align: center;
			}
		}

		.tips {
			padding: 0 28rpx;
			width: 100%;
			height: 80rpx;
			background: #FEF7EF;
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 80rpx;
		}

		.infoBox {
			width: 100%;
			height: auto;
			padding: 0 28rpx;
			background-color: #FFFFFF;

			.passenger-li {
				padding: 15rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F2F2F7;

				.icon {
					margin-left: auto;
				}
			}
		}
	}

	/deep/ .u-form-item--left {
		flex: 0 0 160rpx !important;
	}
</style>
